<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Dizeez: Help science through gaming!</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css">
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Actor" type="text/css">
    <link rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div id="dizeez-app">
      <div id="menu">
        <ul id="menu-nav">
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Tutorial</a>
          </li>
          <li>
            <a href="#">Logout</a>
          </li>
      </div>
      <div id="notifications">
      </div>
      <div id="sidebar">
          <p id="side-msg">Did you mean:</p>
          <div id="autocomplete">
          </div>
      </div>
      <div id="user-info">
      </div>
      <div id="score">
      </div>
      <div id="main">
        <div id="main-container">
          <div class="game-data">
            
          </div>
        </div>
        <div id="main-input">
        </div>
      </div>
    </div>
    <script type="text/template" id="dash-template">
      <div class="game-data">
      </div>
    </script>
    <script type="text/template" id="start-template">
      <div class="no-game">
        Click here to start a new game!
      </div>
    </script>
    <script type="text/template" id="standby-template">
      <div class="standby-game">
        Please wait until a player joins your game...
      </div>
    </script>
    <script type="text/template" id="exist-template">
      <div class="game-status" data-game-id="{game_id}">
        Team: {player_one} and {player_two} | Click to join!
      </div>
    </script>
    <script type="text/template" id="browse-btn-template">
      <div class="browse-btn">
        Click here to browse all waiting games!
      </div>
    </script>
    <script type="text/template" id="self-btn-template">
      <div class="self-btn">
        Click here to return to your active games!
      </div>
    </script>
    <script type="text/template" id="browse-template">
      <div class="game-status" data-user-id="{player}" data-game-id="{game_id}">
        Player #{player} is looking for a challenge!
      </div>
    </script>
    <script type="text/template" id="user-template">
      <div id="avatar-border">
        <img src="{picture}" width="60px" height="60px">
      </div>
      <div id="user-name">{name}</div>
      <div id="score-header">Score</div>
      <div id="score-border">{points}</div>
      <div id="games-header">Games</div>
      <div id="games-border">{games_played}</div>
    </script>
    <script type="text/template" id="results-template">
      <div id="game-results">
        <p>Congratulations! Your score is {score}!</p>
        <p>Your total score is now {total}!</p>
      </div>
      <button id="return-button" class="start-button">Click here to return to the menu!</button>
    </script>
    <script type="text/template" id="game-template">
      <div id="content-left">
        <h1>Hints for this round:</h1>
        <div id="left-list">
        </div>
      </div>
      <div id="content-right">
        <h1>Guesses for this round:</h1>
        <div id="right-list">
        </div>
      </div>
    </script>
    <script type="text/template" id="msg-template">
      <p id="msg">{message}</p>
    </script>
    <script type="text/template" id="input-template">
      <p id="input-msg">Your next entry:</p>
      <input type="text" id="dizeez-input" />
    </script>
    <script type="text/template" id="wait-template">
       <p id="input-msg">Please wait while your partner makes a move.</p>
    </script>
    <script type="text/template" id="ac-template">
      <div class="ac-item">
        <span class="cancer-icon"></span>
        <a href="#" class="ac-disease">{name}</a>
      </div>
    </script>
    <script type="text/template" id="action-template">
      <div class="action">
        <span class="cancer-icon"></span>
        <p class="disease">{name}</p>
      </div>
    </script>
    <script type="text/template" id="correct-template">
      <p id="win-msg">You matched correctly!</p>
    </script>
    <script type="text/template" id="score-template">
      <div id="round-1" class="score-circle {score-1}"></div>
      <div id="round-2" class="score-circle {score-2}"></div>
      <div id="round-3" class="score-circle {score-3}"></div>
      <div id="round-4" class="score-circle {score-4}"></div>
      <div id="round-5" class="score-circle {score-5}"></div>
    </script>
    <script type="text/template" id="button-template">
      <button id="login-button" class="start-button">Sign in to Dizeez with your Google Account!</button>
    </script>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    <script src="/js/dizeez.js"></script>
  </body>
</html>
